<template>
  <nav class="now">
      <li class="now-li" v-for="item in nowlist">
           <router-link :to="{name:'detail',params:{'id':item.id}}">
        <div class="now-poto"><img :src="item.cover.origin" /></div>
        <div class="now-name">
            <div class="now-name-left">
                <div class="now-name-top">{{item.name}}</div>
                <div class="now-name-but">{{item.cinemaCount}}家影院上映{{item.watchCount}}人購票</div>
            </div>
            <div class="now-name-right"><span>{{item.grade}}</span></div>
        </div>
        </router-link>
      </li>
  </nav>
</template>
<script>
 import $ from 'jquery';
export default {
   
data:function(){
    return{
          nowlist:[]
    }
    },
    mounted:function(){
        var url = 'http://localhost:3000/nowplaying?time=' + new Date().getTime();
        var that = this;
        $.get(url).then(function(res){
            that.nowlist = res.data.films;
            console.log(that.nowlist);

        })
    }
 }

</script>
<style>
.now{
     padding-top: 18px;
 }
.now-li{
    margin: 0 17px 17px 17px;
    width: 90%;
    height: 250px;
    list-style: none;
    box-shadow: 0.5px 0.5px 1px #a8a8a8;
}
.now-poto{
    width: 100%;
    height: 200px;

}
.now-poto img{
    width: 100%;
    height: 100%;

}

.now-name-left{
    float: left;
    width: 80%;
    height: 50px;
    padding-top: 13px;
    padding-left:20px;
    box-sizing: border-box;
}
.now-name-top{
    height: 15px;
    user-select: text;
    font-size: 12px;
    line-height: 15px;
}
.now-name-but{
 height: 15px;
 font-size: 8px;
    color: #9a9a9a;
    line-height: 15px;
}

.now-name-right{
    float: right;
    width: 20%;
    height: 50px;
}
.now-name-right span{
        float: right;
        margin-right: 15px;
        color: #f78360;
        text-align: center;
        line-height:50px;
        font-size: 18px;
}
</style>


